<template>
	<view class="about-page">
		<!-- 顶部导航 -->
		<!-- <view class="header-bag">
			<view class="back" @click="goBack">
				<image src="/static/img/icon-Get-into@3.png" class="back-icon" mode="aspectFit" />
			</view>
			<view class="header-center">
				<text class="header-title">关于我们</text>
			</view>
			<view class="header-right"></view>
		</view> -->
		
		<!-- 内容区域 -->
		<view class="wrapper">
			<web-view :src="aboutUrl" @message="onWebviewMessage"></web-view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			aboutUrl: ''
		}
	},
	
	onLoad(options) {
		console.log('=========',options.url)
		this.aboutUrl = options.url
		
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},
		
		// 初始化关于页面
		initAboutPage() {
			this.aboutUrl = this.getAboutUrl
		},
		
		// 处理webview消息
		onWebviewMessage(e) {
			console.log('webview message:', e.detail.data)
		}
	}
}
</script>

<style lang="scss" scoped>
.about-page {
	background-color: #f7f7f7;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

// 顶部导航
.header-bag {
	height: 88rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
	position: fixed;
	top: 10px;
	left: 0;
	right: 0;
	z-index: 999;
	
	.back {
		padding: 10rpx;
		
		.back-icon {
			width: 24rpx;
			height: 48rpx;
		}
	}
	
	.header-center {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.header-title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
		}
	}
	
	.header-right {
		width: 44rpx; // 占位元素，保持标题居中
	}
}

// 内容区域
.wrapper {
	flex: 1;
	padding: 0;
	background-color: white;
	margin-top: 98px; // 88rpx height + 10px top offset
	
	web-view {
		width: 100%;
		height: 100%;
	}
}
</style>